<template>
  <div class="city">
    <city-header></city-header>
    <city-list :hotList="hotList" :listList="listList" :sortList="sortList"></city-list>
  </div>
</template>

<script>
import CityHeader from "@/components/city/pages/header";
import CityList from "@/components/city/pages/list";

export default {
  components: {
    CityHeader,
    CityList
  },
  data() {
    return {
      hotList: [],
      sortList: [],
      listList: {}
    };
  },
  methods: {},
  created() {
    this.$axios.get("/api/city.json").then(res => {
      this.hotList = res.data.data.hotCities;
      this.sortList = Object.keys(res.data.data.cities);
      this.listList = res.data.data.cities;
    });
  }
};
</script>
<style lang="stylus" scoped>
.city
  background #f5f5f5
</style>
